 <template>
  <!-- 排班详情Table表格 -->
  <div>
    <p-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :scroll="tableScroll"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
    >
      <template slot="detailsSteakwith" slot-scope="text,row">
         <!-- {{row.empno==null?true:false}} -->
        <span v-show="row.empno==null?true:false" @click="peolist(row)">{{row.detailsSteakwith}}</span>
        <span v-show="row.empno==null?false:true" @click="peolist(row)">1</span>  
      </template>
      <template slot="detailsManpower" slot-scope="text,row">
        <!-- {{row.empno==null?true:false}} -->
        <a v-show="row.empno==null?true:false" @click="handleHumanTable(row)">{{row.detailsManpower}}</a>
        <a v-show="row.empno==null?false:true" @click="handleHumanTable(row)">{{row.lengthNumber}}</a>  
      </template>

      <template slot="imgSlot" slot-scope="text">
        <span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
        <img
          v-else
          :src="getImgView(text)"
          height="25px"
          alt="图片不存在"
          style="max-width:80px;font-size: 12px;font-style: italic;"
        />
      </template>
      <template slot="fileSlot" slot-scope="text">
        <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
        <p-button
          v-else
          :ghost="true"
          type="primary"
          icon="download"
          size="small"
          @click="uploadFile(text)"
        >下载</p-button>
      </template>

      <span slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)">编辑</a>

        <p-divider type="vertical" />
        <p-dropdown>
          <a class="ant-dropdown-link">
            更多
            <p-icon type="down" />
          </a>
          <p-menu slot="overlay">
            <p-menu-item>
              <p-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                <a>删除</a>
              </p-popconfirm>
            </p-menu-item>
            <template
              v-if="cgButtonLinkList && cgButtonLinkList.length>0"
              v-for="(btnItem,btnIndex) in cgButtonLinkList"
            >
              <p-menu-item :key=" 'cgbtnLink'+btnIndex " v-if="showLinkButton(btnItem,record)">
                <a
                  href="javascript:void(0);"
                  @click="cgButtonLinkHandler(record,btnItem.buttonCode,btnItem.optType)"
                >
                  <p-icon v-if="btnItem.buttonIcon" :type="btnItem.buttonIcon" />
                  {{ btnItem.buttonName }}
                </a>
              </p-menu-item>
            </template>
          </p-menu>
        </p-dropdown>
      </span>
    </p-table>
    <!-- 可用人力对话框 -->
    <div>
      <p-modal v-model="useHumanVisible" title="可用人员详情" width="70%">
        <MesMfDetailsOfAvailablePersonnel ref="child" :childData="childData" @obtainPeople="obtainPeople"></MesMfDetailsOfAvailablePersonnel>
        <template slot="footer">
          <p-button key="back" @click="handleCancel">取消</p-button>
          <p-button key="submit" type="primary" :loading="loading" @click="handleOk">确认</p-button>
        </template>
      </p-modal>
    </div>
  </div>
</template>

 <script>
import MesMfDetailsOfAvailablePersonnel from "@/components/Privately/MesMfDetailsOfAvailablePersonnel.vue";
import { postAction, getAction, deleteAction } from "@/api/manage";
import { JeecgListMixin } from "@/mixins/JeecgListMixin";
import Vue from "vue";

export default {
  name: "",
  mixins: [JeecgListMixin],
  components:{
    MesMfDetailsOfAvailablePersonnel
  },
  data() {
    return {
      dataLength:[],
      peoData:{},
      ChildData:"",
      Ischange:true,
      //可用人力对话框
      useHumanVisible:false,
      EnhanceJS: "",
      cgButtonLinkList: [],
      cgButtonList: [],
      title: "", //存表名
      groupTag: [],
      queryInfo: [],
      code: "",
      // 表头
      columns: [],
      //列设置
      settingColumns: [],
      //列定义
      defColumns: [
        {
          title: "序号",
          dataIndex: "id",
          key: "rowIndex",
          width: 60,
          align: "center",
          customRender: function (t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          title: "二级工序",
          dataIndex: "processTwocode",
          key: "processTwocode",
          align: "center",
          scopedSlots: { customRender: "processTwocode" },
        },
        {
          title: "工站",
          dataIndex: "workstationName",
          key: "workstationName",
          align: "center",
          scopedSlots: { customRender: "workstationName" },
        },
        {
          title: "标准产出工时",
          dataIndex: "detailsOutputtime",
          key: "detailsOutputtime",
          align: "center",
          scopedSlots: { customRender: "detailsOutputtime" },
        },
        {
          title: "技能",
          dataIndex: "skillname",
          key: "skillname",
          align: "center",
          scopedSlots: { customRender: "skillname" },
        },
        
        {
          title: "机台编号",
          dataIndex: "detailsDrilling",
          key: "detailsDrilling",
          align: "center",
          scopedSlots: { customRender: "detailsDrilling" },
        },
        {
          title: "工号",
          dataIndex: "empno",
          key: "empno",
          align: "center",
          scopedSlots: { customRender: "empno" },
        },
        {
          title: "姓名",
          dataIndex: "empname",
          key: "empname",
          align: "center",
          scopedSlots: { customRender: "empname" },
        },
        {
          title: "人员已排工时",
          dataIndex: "detailsHaverowtime",
          key: "detailsHaverowtime",
          align: "center",
          scopedSlots: { customRender: "detailsHaverowtime" },
        },
        {
          title: "人力需求",
          dataIndex: "detailsDemand",
          key: "detailsDemand",
          align: "center",
          scopedSlots: { customRender: "detailsDemand" },
        },
        {
          title: "排配人数",
          dataIndex: "detailsSteakwith",
          key: "detailsSteakwith",
          align: "center",
          scopedSlots: { customRender: "detailsSteakwith" },
        },
        {
          title: "可用人力",
          dataIndex: "detailsManpower",
          key: "detailsManpower",
          align: "center",
          scopedSlots: { customRender: "detailsManpower" },
        },
        {
          title: "岗位标记",
          dataIndex: "detailsSign",
          key: "detailsSign",
          align: "detailsSign",
          scopedSlots: { customRender: "detailsSign" },
        },
      ],
      dataInfo: {},
      /* 分页参数 */
      ipagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "50"],
        showTotal: (total, range) => {
          return range[0] + "-" + range[1] + " 共" + total + "条";
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0,
      },
      url: {
        //根据id获取生产排班(生产排班清单,点击编辑时候显示页面数据)
        list: "/mes-manufacture/mfProductionLayout/",
      },
    };
  },
  props:["details"],
  created() {
    this.initColumns();
    this.setdefColumns();
  },
  watch:{
    details(){
      this.changeList()
      this.childData=this.details
    }
  },
  methods: {
    // 排班详情更新
    changeList(){
      if(this.peoData){
        this.details.details.forEach(item=>{
          if(item.id==this.peoData.id){
            item.empno=this.peoData.empno,
            item.empname=this.peoData.empname,
            item.lengthNumber=this.peoData.lengthNumber,
            item.whether=this.peoData.whether
          }
        })
          this.dataSource=this.details.details
          console.log(this.dataSource)
      }else{
        this.dataSource=this.details.details
      }
    },
    // 可用人力取消按钮
    handleCancel(){
      this.useHumanVisible = false;
    },
    //可用人力确认按钮
    handleOk(){
      this.useHumanVisible = false;
      this.$refs.child.remove()
    },
    //可用人力图表
    handleHumanTable(data) {
       this.peoData.id=data.id;
      this.$emit("handeleChildData",this.details.details)
      this.childData={
        ...this.details,
        skillcode:data.skillcode,
        skillname:data.skillname,
        data:data
      }
      this.useHumanVisible = true;
    },
    peolist(val){
      console.log(val.empno==null)
      console.log(val.empno==null?true:false)
      console.log(val)
    },
    
    obtainPeople(data){
      this.peoData.empno=data.empno
      this.peoData.empname=data.empname
      this.peoData.lengthNumber=data.lengthNumber
      this.peoData.whether=data.whether
      this.Ischange=false
      this.changeList()
    },
    
    tableScroll: function () {
      if (this.columns.length > 5) {
        return { x: this.columns.length * 150 - 40 };
      }
    },
    setdefColumns() {
      if (this.columns.length > 13) {
        let arrLength = this.columns.length - 1;
        this.columns.forEach((item, index) => {
          item["width"] = 130;
        });
        this.columns[arrLength]["fixed"] = "right";
        this.columns[0]["fixed"] = "left";
        this.columns[1]["fixed"] = "left";
      }
    },
    initColumns() {
      //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
      //this.defColumns = colAuthFilter(this.defColumns,'testdemo:');

      var key = this.$route.name + ":colsettings";
      let colSettings = Vue.ls.get(key);
      if (colSettings == null || colSettings == undefined) {
        let allSettingColumns = [];
        this.defColumns.forEach(function (item, i, array) {
          allSettingColumns.push(item.dataIndex);
        });
        this.settingColumns = allSettingColumns;
        this.columns = this.defColumns;
      } else {
        this.settingColumns = colSettings;
        const cols = this.defColumns.filter((item) => {
          if (item.key == "rowIndex" || item.dataIndex == "action") {
            return true;
          }
          if (colSettings.includes(item.dataIndex)) {
            return true;
          }
          return false;
        });
        this.columns = cols;
      }
    },

    //列设置更改事件
    onColSettingsChange(checkedValues) {
      var key = this.$route.name + ":colsettings";
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000);
      this.settingColumns = checkedValues;
      const cols = this.defColumns.filter((item) => {
        if (item.key == "rowIndex" || item.dataIndex == "action") {
          return true;
        }
        if (this.settingColumns.includes(item.dataIndex)) {
          return true;
        }
        return false;
      });
      this.columns = cols;
    },
    onClearSelected() {
      this.selectedRowKeys = [];
      this.selectionRows = [];
      this.selectedMainId = "";
    },
    onSelectChange(selectedRowKeys, selectionRows) {  
      this.selectedMainId = selectedRowKeys[0];
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
    },
    handleEdit(row) {
      this.dataInfo = row;
    },
   
  },
};
</script>

    
<style scoped lang="less">
</style>